<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>表单验证</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport"
		content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=0">

	<link rel="stylesheet" href="../../assets/gougu/css/gougu.css">
</head>

<body>
	<div class="p-3">
		<div class="layui-card">
			<div class="layui-card-header">
				<h3>表单验证</h3>
			</div>
			<div class="layui-card-body">
				<form class="layui-form layui-form-2" action="" lay-filter="component-form-element">
					<div class="layui-row layui-col-space12 layui-form-item">
						<div class="layui-col-lg3">
							<label class="layui-form-label">
								<font>*</font>验证用户名：
							</label>
							<div class="layui-input-block">
								<input type="text" name="username" lay-verify="required" lay-verify="required" placeholder="请输入" lay-reqText="请输入用户名" placeholder="" autocomplete="off" class="layui-input">
							</div>
						</div>
						<div class="layui-col-lg3">
							<label class="layui-form-label">
								<font>*</font>验证手机号码：
							</label>
							<div class="layui-input-block">
								<input type="text" name="mobile" lay-verify="required|phone" placeholder="请输入" lay-reqText="请输入手机号码" autocomplete="off" class="layui-input">
							</div>
						</div>
						<div class="layui-col-lg3">
							<label class="layui-form-label">
								<font>*</font>验证邮箱：
							</label>
							<div class="layui-input-block">
								<input type="text" name="email" name="email" lay-verify="email" placeholder="请输入" lay-reqText="请输入邮箱" autocomplete="off" class="layui-input">
							</div>
						</div>
						<div class="layui-col-lg3">
							<label class="layui-form-label">
								<font>*</font>验证链接：
							</label>
							<div class="layui-input-block">
								<input type="text" name="url" lay-verify="url" placeholder="请输入" lay-reqText="请输入链接" autocomplete="off" class="layui-input">
							</div>
						</div>
					</div>
					<div class="layui-row layui-col-space12 layui-form-item">
						<div class="layui-col-lg3">
							<label class="layui-form-label">
								<font>*</font>验证身份证：
							</label>
							<div class="layui-input-block">
								<input type="text"  name="identity" lay-verify="identity" placeholder="请输入" lay-reqText="请输入身份证" autocomplete="off" class="layui-input">
							</div>
						</div>
						<div class="layui-col-lg3">
							<label class="layui-form-label">
								<font>*</font>验证数字：
							</label>
							<div class="layui-input-block">
								<input type="text" name="number" lay-verify="required|number" placeholder="必填，且是数字" lay-reqText="请输入数字" autocomplete="off" class="layui-input">
							</div>
						</div>
						<div class="layui-col-lg3">
							<label class="layui-form-label">
								<font>*</font>验证日期：
							</label>
							<div class="layui-input-block">
								<input type="text" name="date" id="formDate" lay-verify="date" placeholder="yyyy-MM-dd" lay-reqText="请选择日期" readonly autocomplete="off" class="layui-input">
							</div>
						</div>
						<div class="layui-col-lg3">
							<label class="layui-form-label">
								<font>*</font>下拉选项：
							</label>
							<div class="layui-input-block">
								<select name="type" lay-verify="required" lay-filter="work" lay-reqText="请选择">
									<option value=""></option>
									<option value="1">前端工程师</option>
									<option value="2">Node.js工程师</option>
									<option value="3">PHP工程师</option>
									<option value="4">Java工程师</option>
									<option value="5">运维工程师</option>
									<option value="6">UI设计师</option>
								</select>
							</div>
						</div>
					</div>
					<div class="layui-row layui-col-space12 layui-form-item">
						<div class="layui-col-lg6">
							<label class="layui-form-label"><font>*</font>验证密码：</label>
							<div class="layui-input-inline">
							<input type="password" name="password" lay-verify="pass" placeholder="请输入密码" lay-reqText="请输入密码,6到12位" autocomplete="off" class="layui-input">
							</div>
							<div class="layui-form-mid layui-word-aux">请填写6到12位密码</div>
						</div>
						<div class="layui-col-lg6">
							<div class="layui-inline">
							  <label class="layui-form-label"><font>*</font>价额范围：</label>
							  <div class="layui-input-inline" style="width: 100px;">
								<input type="text" name="price_min" placeholder="￥" autocomplete="off" class="layui-input">
							  </div>
							  <div class="layui-form-mid">-</div>
							  <div class="layui-input-inline" style="width: 100px;">
								<input type="text" name="price_max" placeholder="￥" autocomplete="off" class="layui-input">
							  </div>
							</div>
						  </div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label"><font>*</font>多行文本：</label>
						<div class="layui-input-block">
							<textarea name="desc" placeholder="" lay-verify="required" placeholder="请输入" lay-reqText="请输入多行文本" class="layui-textarea"></textarea>
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">开关-默认开：</label>
						<div class="layui-input-block">
						  <input type="checkbox" checked="" name="open" lay-skin="switch" lay-filter="form-switch" lay-text="ON|OFF">
						</div>
					</div>
					<div class="layui-form-item">
						<div class="layui-input-block">
							<button class="layui-btn" lay-submit lay-filter="component-form-element">立即提交</button>
							<button type="reset" class="layui-btn layui-btn-primary">重置</button>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>
	<script>
		const moduleInit = ['tool'];
		function gouguInit() {
			var form = layui.form, laydate = layui.laydate;
			/* 自定义验证规则 */
			form.verify({
				username: function(value, item){ //value：表单的值、item：表单的DOM对象
					if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){
					return '用户名不能有特殊字符';
					}
					if(/(^\_)|(\__)|(\_+$)/.test(value)){
					return '用户名首尾不能出现下划线\'_\'';
					}
					if(/^\d+\d+\d$/.test(value)){
					return '用户名不能全为数字';
					}
					
					//如果不想自动弹出默认提示框，可以直接返回 true，这时你可以通过其他任意方式提示（v2.5.7 新增）
					if(value === 'admin'){
					alert('用户名不能为敏感词');
					return true;
					}
				},
				pass: [/(.+){6,12}$/, '密码必须6到12位']
			});
			
			/* 监听指定开关 */
			form.on('switch(form-switch)', function(data){
				layer.msg('开关checked：'+ (this.checked ? 'true' : 'false'), {
					offset: '6px'
				});
				layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是ON|OFF', data.othis)
			});
			
			/* 监听提交 */
			form.on('submit(component-form-element)', function (data) {
				layer.msg(JSON.stringify(data.field));
				return false;
			});

			//日期选择
			laydate.render({
				elem: '#formDate',
				max: 7,
				showBottom: false
			});
		}
	</script>
  <script src="../../assets/layui/layui.js"></script>
  <script src="../../assets/gougu/gouguInit.js"></script>
</body>

</html>